<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <#assign base=request.contextPath  />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title></title>
    <link rel="stylesheet" href="${base}/frame/layui/css/layui.css">
    <link rel="stylesheet" href="${base}/frame/static/css/style.css">
    <link rel="icon" href="${base}/frame/static/image/code.png">
    <script type="text/javascript" src="${base}/js/zhang.js"></script>
    <script   src="${base}/jquery-1.8.3.min.js"></script>
    <style type="text/css">
        #demo2 img{
            width: 150px;
            height: 80px;
        }
        html { overflow-x: hidden; overflow-y: auto; }
    </style>
</head>
<body class="body">
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  		<legend>租车</legend>
	</fieldset>
    	<form class="layui-form" action="">
        <button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><a style="color:red">*</a>&nbsp;选择租车的型号：</button><br/><br/>
    	  <div class="layui-form-item">
		      <select id="carType" lay-filter="aihao">
		        <option value=""></option>
		        <option value="A">A</option>
		        <option value="B">B</option>
		        <option value="C">C</option>
		        <option value="D">D</option>
		      </select>
		  </div>
    	<button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><a style="color:red">*</a>&nbsp;选择租车的条件：</button><br/><br/>
          <div class="layui-form-item">
		    <div class="layui-input-inline">
		      <select id="carBrand">
		        <option value="">请选择品牌</option>
		        <option value="一汽重汽">一汽重汽</option>
		        <option value="江淮">江淮</option>
		        <option value="五征">五征</option>
		      </select>
		     </div>
		     <div class="layui-input-inline">
		      <select id="carKm">
		        <option value=""><a style="color:red">*</a>&nbsp;请选择里程</option>
		        <option value="不限">不限</option>
		        <option value="0KM--10KM">0KM--10KM</option>
		        <option value="10KM--100KM">10KM--100KM</option>
		        <option value="100KM--1000KM">100KM--1000KM</option>
		        <option value="1000KM以上">1000KM以上</option>
		      </select>
			</div></div>
			<div class="layui-form-item">
		     <div class="layui-input-inline">
		      <select id="carSize">
		        <option value=""><a style="color:red">*</a>&nbsp;请选择容积</option>
		        <option value="不限">不限</option>
		        <option value="40立方--50立方">40立方--50立方</option>
		        <option value="50立方--60立方">50立方--60立方</option>
		        <option value="60立方--70立方">60立方--70立方</option>
		        <option value="70立方以上">70立方以上</option>
		      </select>
		      </div>
		     <div class="layui-input-inline">
		      <select id="carMoeny">
		        <option value=""><a style="color:red">*</a>&nbsp;请选择价格</option>
		        <option value="不限">不限</option>
		        <option value="0万--10万">0万--10万</option>
		        <option value="20万--30万">20万--30万</option>
		        <option value="30万--40万">30万--40万</option>
		        <option value="40万以上">40万以上</option>
		      </select>
		    </div>
		  </div>
		  	<div class="layui-upload">
			  <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" id="test1"><a style="color:red">*</a>&nbsp;上传展示图片：</button>
			  <div class="layui-upload-list">
			    <img style="width:90px;height:70px;"  class="layui-upload-img" id="demo1">
			    <p id="demoText"></p>
			  </div>
			</div>
		  	<div class="layui-upload">
			  <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" id="test2"><a style="color:red">*</a>&nbsp;上传轮播图片：</button>
			  <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
			    <div class="layui-upload-list" id="demo2"></div>
			 </blockquote>
			</div>
			  <div class="layui-form-item" style="float: right;margin-bottom: 50px">
			    <div class="layui-input-block">
                    <button class="layui-btn layui-btn-normal" id="test9" type="button" onclick="sub()" >立即提交</button>
			      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
			    </div>
			  </div>
		  </form>
    <script type="text/javascript" src="${base}/frame/layui/layui.js"></script>
    <script type="text/javascript" src="${base}/js/index.js"></script>
<script type="text/javascript">

    // layui方法
    layui.use(['tree', 'table', 'vip_table', 'layer'], function () {

        // 操作对象
        var table = layui.table
                , vipTable = layui.vip_table
                , layer = layui.layer
                , $ = layui.jquery;

        // 表格渲染
        var tableIns = table.render({
            elem: '#dateTable'                  //指定原始表格元素选择器（推荐id选择器）
            , size: 'sm'//小尺寸的表格
            ,toolbar: '#toolbarDemo'
            , height: vipTable.getFullHeight()    //容器高度
            , cols: [[                  //标题栏
                {checkbox: true, sort: true, fixed: true, space: true}
                , {field: 'carBrand', title: '品牌', width: 80}
                , {field: 'carKm', title: '里程', width: 120}
                , {field: 'carType', title: '型号', width: 120}
                , {field: 'carMoeny', title: '价格', width: 180}
                , {field: 'carSize', title: '容积', width: 180}
            ]]
            , id: 'dataCheck'
            , url: '#'
            , method: 'get'
            ,page: {
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip']
                ,theme: '#FD482C'
                ,limit: 20
            }
            , loading: false
            , done: function (res, curr, count) {
                //如果是异步请求数据方式，res即为你接口返回的信息。
                //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                console.log(res);

                //得到当前页码
                console.log(curr);

                //得到数据总量
                console.log(count);
            }
        });

        // 获取选中行
        table.on('checkbox(dataCheck)', function (obj) {
            console.log(obj.checked); //当前是否选中状态
            console.log(obj.data); //选中行的相关数据
            console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
        });

        // // 树
        // layui.tree({
        //     elem: '#tree' //传入元素选择器
        //     , click: function (item) { //点击节点回调
        //         layer.msg('当前节名称：' + item.name);
        //         // 加载中...
        //         var loadIndex = layer.load(2, {shade: false});
        //         // 关闭加载
        //         layer.close(loadIndex);
        //         // 刷新表格
        //         tableIns.reload();
        //     }
        //     , nodes: [{ //节点
        //         name: '父节点1'
        //         , children: [{
        //             name: '子节点11'
        //             , children: [{
        //                 name: '子节点111'
        //             }]
        //         }, {
        //             name: '子节点12'
        //         }]
        //     }, {
        //         name: '父节点2'
        //         , children: [{
        //             name: '子节点21'
        //             , children: [{
        //                 name: '子节点'
        //             }]
        //         }]
        //     }]
        // });

        // you code ...


    });
</script>
<script>
    var fileIds=[];
    layui.use(['form','upload'], function(){

        var $ = layui.jquery
                ,form = layui.form
                ,upload = layui.upload;

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            ,url: '${base}/car/upload'
            ,before: function(obj){
                layer.load(); //上传loading
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            ,auto:true
            ,data: {
                isCarIndex:1
            }
            ,done: function(res){
                layer.closeAll('loading'); //关闭loading
                layer.msg(res.msg)
                fileIds.push(res.data.fileId);
            }
        });

        //多图片上传
        upload.render({
            elem: '#test2'
            ,url: '${base}/car/upload'
            ,multiple: true
            ,
            before:function (obj){
                layer.load(); //上传loading
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
                });
            }
            ,auto:true
            ,data: {
                isCarIndex:2
            }
            //上传完毕回调函数
            ,done: function(res){
                layer.closeAll('loading'); //关闭loading
                layer.msg(res.msg)
                fileIds.push(res.data.fileId);
            }
        });


    });
function sub(){
    var formData={};
    debugger;
    formData.carType=$("#carType").val();
    formData.carBrand=$("#carBrand").val();
    formData.carKm=$("#carKm").val();
    formData.carSize=$("#carSize").val();
    formData.carMoeny=$("#carMoeny").val();
    $.ajax({
        type: "post",
        traditional: true,//这里设置为true,不然后台接收到的参数会带上[]，导致数据无法正常接收
        data: {filesId: fileIds ,param:JSON.stringify(formData)},
        url: "${base}/car/insert",
        success: function (data) {
            data=JSON.parse(data);
            if (data.flag===true){
                window.location.href="${base}/car/car_rental.html"
            }else{
                layer.msg(data.msg)
            }


        }
    });
}
</script>
</body>
</html>